<template>
    <div class="upCopperCont">
        <div :class="index%3==0?'noLeft formVal headImg':'formVal headImg'" :key="index" v-for="(item,index) in imgArr">
            <img :src="item.img+ossSrc" />
            <div @click="delImgFn(index)" class="delIcon iconfont icon-shanchu"></div>
        </div>
        <div :class="imgArr.length%3==0?'noLeft formVal headImg':'formVal headImg'">
            <div class="upImg iconfont icon-xiangji2"></div>
            <input accept="image/*"  ref="file" type="file" @change="onFileChange($event)" />
        </div>
        <el-dialog
            @opened="onDialogOpened"
            @close="cancelFn"
            :show-close="false"
            width="90%"
            :append-to-body="true"
            title="图片裁剪"
            :visible.sync="dialogVisible">
            <div class="preview-image-wrap">
                <img ref="preview-image" class="preview-image" :src="previewImage+ossSrc" alt="">
            </div>
            <div v-if="upImgLoad" class="imgTipLoad">
              <van-loading size="2rem" type="spinner" color="#000" vertical>上传中,请耐心等待~</van-loading>
            </div>
            <div class="ImgCtrlBtn">
                <div @click="cancelFn" class="canceBtn elBtnItem">取消</div>
                <div  @click="onUpdatePhoto" class="elBtnItem">确定</div>
            </div>
        </el-dialog>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>

    </div>
  </template>
  
  <script>
    import 'cropperjs/dist/cropper.css'
    import Cropper from 'cropperjs'
    import {Toast } from 'vux'
    export default {
      components: {Toast},
      data() {
        return {
          showText:'',
          showToast:false,
          previewImage:'',
          dialogVisible:false,
          headImg:'',
          imgArr:this.propImg,
          upImgLoad:false,
        }
      },
      props: {
        propImg:Array,
      },
      methods:{
        delImgFn(index){
            this.imgArr.splice(index,1)
            this.$emit('successCropper',this.imgArr)
        },
        cancelFn(){
            this.dialogVisible = false
            this.cropper.destroy();
            this.previewImage= ''
            this.$refs.file.value = ''
        },
        onFileChange(e){
            let file = e.target.files[0]
            let blobData = window.URL.createObjectURL(file)
            this.previewImage = blobData
            this.dialogVisible = true
            // 解决选择相同图片不触发change事件的问题
            this.$refs.file.value = ''
        },
          
        onUpdatePhoto(){
          if(!this.upImgLoad){
            this.cropper.getCroppedCanvas().toBlob(file => {
              let formData = new FormData();// 可以增加表单数据
              formData.append("file",file);
              this.upImgLoad = true
              $.ajax({
                url:this.apis+'/common/Upload/UpImg',
                dataType:"json",
                type:'post',
                processData : false,
                contentType : false,
                data:formData,
                success:(res)=>{
                  if(res.code==1){
                    this.imgArr.push({img:res.data.src})
                    this.$emit('successCropper',this.imgArr)
                    this.previewImage =res.data.src
                    this.dialogVisible = false
                    this.cropper.destroy();
                  }else{
                    this.showToast = true
                    this.showText = res.msg
                  }
                  this.upImgLoad = false
                },
                error:(res)=>{
                  this.upImgLoad = false
                  this.showToast = true
                  this.showText = '网络超时'
                }
              })
            })
          }
            
          },
        
          onDialogOpened(){
            let image = this.$refs['preview-image']
            let cropper = new Cropper(image, {
              aspectRatio: 1 / 1,// 裁剪框比列  1/1 长与宽的比列  NaN:任意比列
              viewMode: 1,// 0:对裁剪框的移动没有限制  1:裁剪框不能超过图片//2:裁剪框不能超过图片且图片高度和阴影背景高度一样  3:让图片完全填充阴影背景
              dragMode: 'none',
              zoomOnTouch : true,//是否可以通过触摸的形式来去放大图片(手机端)
              zoomable : true,//是否允许缩放图片
              autoCropArea:0.8,//当初始化时，裁剪框的大小与原图的比例
              background: true,//是否显示网格背景
              center : true,//裁剪框是否在图片的中心
              cropBoxResizable: true,//是否可以调节裁剪框的大小
            })
            this.cropper = cropper
          },
      },
      mounted(){
      },
      created() {
      },
    }
  </script>
  
  <style scoped lang="less">
  .upCopperCont{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 1rem;
    .headImg{
        width: 30%;
        margin-left: 5%;
        min-height: 5rem;
        border-radius: 0.25rem;
        background-color: #f7f8fa;
        position: relative;
        margin-bottom: 1rem;
        .delIcon{
            position: absolute;
            top: 0;
            right: 0;
            font-size: 0.9rem;
            color: #fff;
            width: 1.5rem;
            height: 1.5rem;
            background-color: black;
            text-align: center;
            line-height: 1.5rem;
            border-radius: 0 0 0 0.75rem;
        }
        input{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        .upImg{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 5rem;
            font-size: 2rem;
            // color: #dcdee0;
            color: #ccc;
        }
        img{
            width: 100%;
        }
    }
    .noLeft{
        margin-left: 0;
    }
  }
  </style>
    <style scoped lang="less">
    .preview-image-wrap{
        width: 100%;
        background-color: #fff;
        height: 15.5rem;
        .preview-image {
            display: block;
            max-width: 100%;
            // height: 15rem;
        }
    }
    .el-dialog__body{
        padding: 0.5rem 1rem;
    }
    .imgTipLoad{
      margin: 0.75rem 0;
    }
    .ImgCtrlBtn{
        width: 100%;
        display: flex;
        justify-content: space-between;
        border: 1px solid ea4e62;
        margin-top: 0.75rem;
        .elBtnItem{
            width: 48%;
            background-color: #ea4e62;
            padding: 0.6rem 0;
            border-radius: 0.25rem;
            text-align: center;
            color: white;
        }
        .canceBtn{
            background-color: #ccc;
            color: white;
        }
    }
  </style>
  